約 4,961,764 件
https://w.atwiki.jp/cowbell/pages/15.html
インライン ブロック a リンクする ○ abbr 略語 ○ acronym 略語 ○ address アドレス ○ applet アプレット ○ area クリッカブルマップエリア b 太字 ○ base ベースURL basefont 基本フォント ○ bdo 国際化情報 ○ bgsound バックミュージック big 大きな太字 ○ blink 点滅文字 ○ blockquote 引用 ○ body 本文 br 開業 ○ button ボタン ○ caption テーブルの見出し center 中央揃え ○ cite 参照 ○ code コード ○ col テーブルのカラム設定 colgroup テーブルのカラムグループ設定 comment コメント dd 定義の説明 del 削除 dfn 定義 dir ディレクトリリスト div ブロック要素 dl 定義リスト dt 定義語 dm 強調 embed オブジェクトの埋め込み fieldset フィールドセット font フォント form フォーム frame フレーム frameset フレームセット h1 - h6 見出し head ヘッダ hr 水平線 html HTML文書 i イタリック文字 iframe インラインフレーム ilayer インラインレイヤ img イメージ input フォーム部品：入力欄 ins 挿入 isindex 検索フォーム kbd キーボード keygen 鍵の作成
https://w.atwiki.jp/h3djp/pages/17.html
H3DAPIを使った例H3DAPIに含まれて配布されている例X3Dファイルのみの例 X3DファイルとPythonを使用した例 C++を使用した例 VRMLの例 H3DAPIを使った例 H3DAPIに含まれて配布されている例 H3DAPI/examplesフォルダに移動し、検索パスを入力すれば、参照することができるでしょう。 X3Dファイルのみの例 X3Dファイルのみが使用されている例がこちらです。中にはH3Dの固有ノードが利用されているものもあります。 CubeMap/CubeMap.x3d - ComposedCubeMapTextureノードを使ったデモ。 DepthMapSurface/depthMappedITS.x3d - DepthMapSurfaceノードを使って、シンプルな板の触覚を表現。OpenHapticsrendererは利用していません。 DepthMapSurface/depthMappedSphere.x3d - DepthMapSurfaceノードを使って、球形の触覚を表現。OpenHapticsrendererは利用していません。 ForceEffects/forcefield.x3d - ForceFieldノードのデモ。触覚デバイスを右に押そうとする力を発生させます。 ForceEffects/magneticGeometryEffect.x3d - MagneticGeometryEffectノードのデモ。 スプリングはジオメトリの表面に向かって触覚学装置を引きよせます。 ForceEffects/positionFunctionEffect.x3d - PositionFunctionEffectノードのデモ。位置情報から触覚デバイスへ送る力を計算します。 ForceEffects/timeFunctionEffect.x3d - TimeFunctionEffectノードのデモをします。時間によって触覚デバイスへ送る力を計算します。 HapticLayers/hapticLayers.x3d - 異なった表面の表現法を示しています。箱の中に別の箱が入っていますが、質感はそれぞれ異なります。 magneticlines/magneticlines.x3d - 引き寄せる性質を持つ線を表示します。OpenHapticsrendererのみを利用しています。 Shader nodes/cg_glass.x3d - H3DAPIでどうシェーダを使用するかの例。ガラスで作られているように見せるためCG言語を使用します。 Shader nodes/glsl_polkadot.x3d - H3DAPIでどうシェーダを使用するかの例。 赤色の表面に白いドットがあるように見せるためGLSL言語を使用します。 Sound - Soundノードを用いたデモ。音は触覚デバイスの後を追います。 SuperShape/SuperShape.x3d - SuperShapeノードのデモ。 x3dmodels - このディレクトリには、X3D定義の3Dモデルを含んでいるサブディレクトリがあります。 Sceneへロードされると、触覚デバイスでそれらに触れることができます。 X3DファイルとPythonを使用した例 bumpmap/bumpmap.x3d - MultiTextureノードとPythonを使用することで隆起を表現しています。 触覚学装置は光源を置くのに使用されます。 DeformableShape/deform.x3d - DeformableShapeノードを使用して、膜のようなオブジェクトを簡単に変形させます。変形させる形をPythonによって出力しています。 DynamicTransform/dynamic.x3d - 押すと均衡に戻ろうとするDynamicTransformノードの機能を示します。 flight/flight.x3d - 仮想世界での飛行をシンプルに表現しています。触覚デバイスが認識されていない場合は、キーボード入力となります。 ForceEffects/springs.x3d - SpringEffectノードのデモ。 manualExamples/Python/Sphere.x3d - マニュアルとしての例。マウス左ボタンが押されたら球の色を変えます。 manualExamples/Python/Spheres.x3d - マニュアルとしての例。 マウス左ボタンが押された時、新しい球をランダムの色で追加します。 Shader nodes/cg_earthshader.x3d - H3DAPIでどうシェーダを使用するかの例。 地球を照らす太陽のイミテーションとして触覚学装置を使用できるようにCG言語を使用します。 Shader nodes/glsl_earthshader.x3d - H3DAPIでどうシェーダを使用するかの例。 地球を照らす太陽のイミテーションとして触覚学装置を使用できるようにGLSL言語を使用します。 SpaceTennis/SpaceTennis.x3d - ラケットを触覚デバイスによって制御する簡単なテニスゲーム。 ラケットがボールに当るとき、フォース・フィードバックを与えます。 C++を使用した例 manualExamples/C++/CMakeLists.txt--マニュアルからの例。 SphereとSpheresの形状ファイルを発生させるためにCMakeを使用します。 manualExamples/Python/Sphere.x3dとmanualExamples/Python/Spheres.x3dのC++バージョン。 ParticleDemo--ソースを調べるときだけ参照してください。Particle Systemsコンポーネントのデモをする不完全な例。 ThreadExample--H3DAPIでスレッドをセットアップすることの例。 H3DLoadとH3DViewerは例のあるフォルダに位置していませんが、H3DAPIを使用するプログラムの例とみなせます。 VRMLの例 Paintable board example using SFImage in SpiderMonkey
https://w.atwiki.jp/projecthikky/pages/87.html
今日の課題：Canvasのスケールを変更する コード https //paiza.io/projects/Eax6VctiyxRJrgpHGb7Jxg 実行結果 https //out.paiza.io/projects/Eax6VctiyxRJrgpHGb7Jxg/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 スケールを変更する /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); var rad = function (d) { return 2.0 * Math.PI * (d / 360.0) ; }; ctx.beginPath(); ctx.scale(1.0, 1.0); ctx.strokeStyle = blue ; ctx.arc(100, 100, 50, rad(0), rad(360), false); ctx.stroke(); ctx.beginPath(); ctx.scale(2.0, 1.0); ctx.strokeStyle = red ; ctx.arc(50, 100, 50, rad(0), rad(360), false); ctx.stroke(); ctx.scale(0.5, 1.0); // スケールを戻しておく(スケールは累積する) ctx.beginPath(); ctx.scale(1.0, 2.0); ctx.strokeStyle = green ; ctx.arc(100, 50, 50, rad(0), rad(360), false); ctx.stroke(); } mydraw(); /script /body /html scale(sx,sy) 現在のX方向スケールをsx倍に、Y方向スケールをsy倍にする 座標や幅や高さなどがスケール倍されて描写される
https://w.atwiki.jp/projecthikky/pages/77.html
今日の課題：Canvasで丸を描く コード https //paiza.io/projects/76vJ1mfwpUgF-7wgnMWflA 実行結果 https //out.paiza.io/projects/76vJ1mfwpUgF-7wgnMWflA/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 丸を描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); var rad = function (d) { return 2.0 * Math.PI * (d / 360.0) ; }; ctx.strokeStyle = red ; var x = [100, 300, 500]; var y = 100; // 左 ctx.beginPath(); ctx.arc(x[0], y, 50, rad(0), rad(360), false); ctx.stroke(); // 真ん中 ctx.beginPath(); ctx.arc(x[1], y, 50, rad(0), rad(280), false); ctx.stroke(); // 右 ctx.beginPath(); ctx.arc(x[2], y, 50, rad(0), rad(280), true); ctx.stroke(); ctx.fillStyle = blue ; y += 150; // 左 ctx.beginPath(); ctx.arc(x[0], y, 50, rad(0), rad(360), false); ctx.fill(); // 真ん中 ctx.beginPath(); ctx.arc(x[1], y, 50, rad(0), rad(280), false); ctx.fill(); // 右 ctx.beginPath(); ctx.arc(x[2], y, 50, rad(0), rad(280), true); ctx.fill(); ctx.strokeStyle = green ; ctx.fillStyle = green ; y += 150; ctx.beginPath(); ctx.arc(x[0], y, 50, rad(0), rad(280), false); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x[1], y); ctx.arc(x[1], y, 50, rad(0), rad(280), false); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x[2] + 80, y - 100); ctx.arc(x[2], y, 50, rad(0), rad(280), false); ctx.closePath(); ctx.stroke(); } mydraw(); /script /body /html arc(x,y,r,s,e,a) 円弧を描く。x,yは中心座標、rは半径、s,eは弧の始点と終点を中心点真右を基準にラジアン角度で、aは右周りか左周りか ラジアン角度は普通の角度を円周率の２倍を掛けて３６０で割ると求まる。 arcはlineToと同じようにbeginPath()やstroke()やfill()やclosePath()などを組み合わせて使う arcは他のarcやlineToやmoveToのカレント座標の影響を受けるので気をつけないと余計な線が描かれる (beginPath()などで回避するとよいかも)
https://w.atwiki.jp/projecthikky/pages/82.html
今日の課題：Canvasで二次ベジェ曲線を引く コード https //paiza.io/projects/YXhqX9C_zt86Vme_bt3PBw 実行結果 https //out.paiza.io/projects/YXhqX9C_zt86Vme_bt3PBw/output.html 二次ベジェ曲線 なんかよく分からんが曲線を描ける 使い方難しそう !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 二次ベジェ曲線を引く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.moveTo(100, 100); ctx.quadraticCurveTo(150, 200, 200, 200); ctx.quadraticCurveTo(220, 175, 200, 150); ctx.quadraticCurveTo(125, 50, 250, 150); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = blue ; ctx.moveTo(350, 50); ctx.quadraticCurveTo(350, 85, 400, 120); ctx.quadraticCurveTo(350, 85, 300, 120); ctx.quadraticCurveTo(350, 85, 350, 50); ctx.fill(); ctx.beginPath(); ctx.fillStyle = magenta ; ctx.moveTo(350, 250); ctx.quadraticCurveTo(390, 265, 400, 320); ctx.quadraticCurveTo(350, 335, 300, 320); ctx.quadraticCurveTo(310, 265, 350, 250); ctx.fill(); } mydraw(); /script /body /html quadraticCurveTo(cx,cy,x,y) カレント座標から(x,y)までの直線を(cx,cy)を基準とした二次ベジェ曲線を引く（？）
https://w.atwiki.jp/testlink/pages/58.html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd" !-- Japanese Translated by Testing Engineer s Forum (TEF) in Japan, Working Group of TestLink Japanese Translation Project -- html xmlns="http //www.w3.org/1999/xhtml" lang="jp" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / meta http-equiv="Content-language" content="jp" / meta name="author" content="Martin Havlat" / meta name="copyright" content="GNU" / meta name="robots" content="NOFOLLOW" / title TestLink Instructions /title style media="all" type="text/css" @import "../../{$smarty.const.TL_THEME_CSS_DIR}testlink.css"; /style script type="text/javascript" src="../../javascript/testlink_library.js" /script /head body div class="workBack" h1 テストケースの編集とアーカイブ /h1 h2 目的 /h2 p span class="help" onclick="javascript open_popup( ./glosary.html#testspec );" テスト仕様 /span は、存在する span class="help" onclick="javascript open_popup( ./glosary.html#testproject );" Test project /span , テストスイート、 span class="help" onclick="javascript open_popup( ./glosary.html#testcase );" テストケース /span の情報を閲覧したり変更したりする場所です。異なるバージョンのテストケースを見ることもできます。 /p h2 やってみましょう！： /h2 ol li ナビゲーションシーンのテストプロジェクト名を選択します。 /li li 新しいテストスイートとテストケースを作成します。(テストプロジェクト右上端に在る、テストプロジェクトの選択で選ぶことができます。) /li li 左側に在るツリーをたどって、データを修正していきます。 /li li テストケースの準備ができているとき、 span class="help" onclick="javascript open_popup( ./glosary.html#testplan );" テスト計画 /span に作られた仕様を割り当てます /ol p TestLinkはテストケースをNレベルのテストスイートに作りこんでいきます。テストスイートの内容を記述することができます。この情報は、テストケースと一緒に印刷することもできます。 /p /div /body /html
https://w.atwiki.jp/webdevelop/pages/4.html
HTMLとは Hyper Text Markup Language の略 HTMLはマークアップ言語である マークアップ言語はいくつかのタグで構成される HTML タグ タグは” ”と” ”でキーワードを挟んだもの 例： h1 大抵の場合、タグはペアになっている 例： h1 と /h1
https://w.atwiki.jp/api_programming/pages/48.html
下位ページ フォント・テキスト フォーム(Form) レイアウト レスポンシブデザイン 画像 色 Content リンク form CSS適用の優先順位 CSSのコメントアウト モバイルサイト用の表示CSS jQuery Mobile 画像のフィルタ 表表をつくる 行をつくる 列をつくる左寄せ、センタリング、右寄せ 要素の表示、非表示 ポップアップ風のメニューを仕込む（主にcssで） エラー時のステータスコード 流行りのUIをコード付きで紹介 ウェブサイトのUIに悩んだときにインスピレーションが受けられるサイト「inspiration ui」 ロゴのジェネレータ Instagram風の写真加工ができるCSSライブラリ「CSSGram」 簡易なチャートグラフを手軽に描けるサイト「BEAM」 200万点以上のアイコンをベクター形式でダウンロードできるサイト「iconshock」 HTMLクイックリファレンス ★スタイルシートリファレンス（目的別） - HTMLクイックリファレンス リンク 新しいウィンドウ（タブ）で開く a href="~" target="_blank" /a form FORM - HTMLクイックリファレンス CSS 適用の優先順位 全体に適用されるものと局所に適用される者では、局所に適用されるものが優先される。#xyz p p#xyz #xyz 上書きされるので、最後に読み込まれたものが適用される。 強制的に優先順位を上げるには !important を付ける p {color red !important;} /*この値が最優先されて有効となる*/ スタイルの優先順位 - HTML クイックリファレンス CSSのコメントアウト /* コメントアウト */ // は使えない（認識する場合もあるらしい） http //monopocket.jp/blog/css/1278/ モバイルサイト用の表示CSS jQuery Mobile Javascript/jQuery Mobile 画像のフィルタ http //migo-media.com/css-filter/ 表 a aa aaa b bb bbb TABLE - ★HTMLタグリファレンス 行をつくる→行の中に列をつくる table tr th ... /th td ... /td /tr tr th ... /th td ... /td /tr /table 表をつくる table ... /table 行をつくる tr ... /tr 列をつくる tr td ... /td /tr 左寄せ、センタリング、右寄せ td align="right" } 要素の表示、非表示 タグはあるけれど、表示はされない、という状態をつくる visiblity display 非表示・使用不可 visiblity - HTMLクイックリファレンス（スタイルシートリファレンス） display - HTMLクイックリファレンス（スタイルシートリファレンス） ポップアップ風のメニューを仕込む（主にcssで） メニューボタン（メニューアイコン）にポップアップルメニューとなるdiv要素を仕込んでおく。そのdiv要素は普段は display none を設定しておく。（もしくはjavascript等でクリックしたときに生成するようにしておく） クリックしたら display block（とか） で表示させる。この時、 レイアウトを崩さないように、position absolute（メニューボタン位置に連動させるなら、親にposition relaltiveも）を仕込む z-index を設定して、他の要素より前に出す。 親要素に overflow hidden が設定してると、親の枠外に飛び出せなくなる。 ので注意する。 エラー時のステータスコード HTTPステータスコード - Wikipedia 流行りのUIをコード付きで紹介 CodeMyUI.com - http //codemyui.com/ ウェブサイトのUIに悩んだときにインスピレーションが受けられるサイト「inspiration ui」 http //inspirationui.com/ ロゴのジェネレータ http //girlsnet.ninpou.jp/logo.html Instagram風の写真加工ができるCSSライブラリ「CSSGram」 http //una.im/CSSgram/ 簡易なチャートグラフを手軽に描けるサイト「BEAM」 BEAM 200万点以上のアイコンをベクター形式でダウンロードできるサイト「iconshock」 iconshock
https://w.atwiki.jp/projecthikky/pages/83.html
今日の課題：Canvasで三次ベジェ曲線を引く コード https //paiza.io/projects/ezyvqA0OYv8DPpmgXoPzxQ 実行結果 https //out.paiza.io/projects/ezyvqA0OYv8DPpmgXoPzxQ/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 三次ベジェ曲線を引く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.moveTo(100, 100); ctx.bezierCurveTo(130, 200, 170, 200, 200, 100); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = blue ; ctx.moveTo(250, 100); ctx.bezierCurveTo(280, 10, 320, 200, 350, 100); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = green ; ctx.moveTo(400, 200); ctx.bezierCurveTo(550, 250, 350, 150, 500, 200); ctx.stroke(); } mydraw(); /script /body /html bezierCurveTo(cx1,cy1,cx2,cy2,x,y) カレント座標から(x,y)までの線を(cx1,cy1),(cx2,cy2)の座標を元に三次ベジェ曲線を描く
https://w.atwiki.jp/even_eko/pages/17.html
DOMを非表示 下のコードをタグの中に入れればOK! style="display none; " 例 div style="display none;" /div styleではcssのパラメータを変更できる。displayはcssのコマンドである。 audioタグ htmlファイル !DOCTYPE html html head title html5オーディオプレイヤー /title meta charset="UTF-8" script src="./html5_audio.js" /script /head body div id="audioZone" audio id="audio_8000" preload="auto" controls source src="audio/8000.wav" type="audio/wav" source src="audio/8000.mp3" type="audio/mp3" p ※ご利用のブラウザでは再生することができません。 /p /audio /div div id="musicZone" input id="startMusic" type="image" src="./img/q_pc_transmit_on.png" width="127px" height="58px" onclick="audioPlay(8000)"/ /div /body /html jsファイル function audioPlay(num) { var string = "audio/" + num + ".mp3"; var audio = new Audio(string); audio.play(); console.log(string); } これなら、Android2.2であるIS11Tでも動作した。 jsファイルにjQueryを使ったり、下のスクリプトを使ったりすると動作しなかった。 document.getElementById("audio_8000").play();